import React from "react";
import styles from "./index.less"
import { ButtonGroup,ImportModal, MoreOption } from "@/utils/CommonComponent";
import { Button, Checkbox, Dropdown, Icon, Input, Menu, Pagination, Select, Table } from "antd";
import { formDictionaryDownload } from "@/services/formInteraction";
import { memDeptUserList, memDeptUserSync } from "@/services/aigcUser";
import { getFullSync } from "@/services/user";
import RecordsModal from "../Account/staffManage/rightList/recordsModal";

class CustomDockData extends React.Component{
  constructor(props){
    super(props);
    this.state = {
      importVisible:false,
      importLoading:false,
      memberVisible:false,
      columns:[],
      list:[],
      loading:false,
      total:0,
      current:1,
      size:10,
      headerList:[],
      checkedValue:[],
      dropDownVisible:false,
      search:"",
    }
  }

  componentDidMount(){
    if(this.props.onRef){
      this.props.onRef(this)
    }
  }

  getTableData = () => {
    this.setState({
      loading:true
    },async () => {
      const { current,size,search } = this.state;
      const { currentNode,settingInfo } = this.props;
      const res = await memDeptUserList({current,size,categoryId:currentNode.id,search:settingInfo.type == 0 || settingInfo.type == 2 ? search : ''})
      //处理表头
      const headerList = res.headerList ? 
        res.headerList.map(item => {return {title:item.showName,dataIndex:item.className,width:100}}) 
        : []
      this.setState({
        list:res.records ? res.records.records : [],
        columns:headerList,
        total:res.records ? res.records.total : 0,
        checkedValue:headerList ? headerList.map(item => item.dataIndex) : [],
        loading:false
      })
    })
  }

  doSearch = (current,size) => {
    this.setState({current,size},() => {
      this.getTableData()
    })
  }

  openAddMember = () => {

  }

  handleCancelImport = () => {
    this.setState({
      importVisible:false
    })
  }

  handleDownload = async () => {
    const res = await formDictionaryDownload()
  }

  handleUpload = info => {
    const that = this;
    this.setState({
      importLoading:true
    },() => {
      const file = info.file
      if(file.status == 'done' && file.response){
        const response = file.response
        if(response.code == 0){
          console.log(response.data);
          that.handleCancelImport()
          // that.getTableData()
        }
        message.info(response.message)
        that.setState({
          importLoading:false
        })
      }
    })
  }

  handleMenuClick = (e) => {
    if(e.key == 1){
      this.props.toSetting()
    }
    if(e.key == 2){
      this.props.history.push({ pathname: '/membersAndDepartments/fieldPage',query:{} })
    }
  }

  handleCheckedValue = checkedValue => {
    this.setState({
      checkedValue
    })
  }

  handleVisibleChange = visible => {
    this.setState({
      dropDownVisible:visible
    })
  }

  doSync = async () => {
    const res = await getFullSync()
    this.props.checkSyncStatus(true)
  }

  getSyncList = async () => {
    this.RecordsModal.openModal()
  }

  render(){
    const { importVisible,importLoading,columns,list,current,size,total,checkedValue,dropDownVisible,search,loading } = this.state;
    const { settingInfo } = this.props;
    
    const menu = (
      <Menu onClick={this.handleMenuClick}>
        <Menu.Item key="1">对接管理</Menu.Item>
        <Menu.Item key="2">字段管理</Menu.Item>
      </Menu>
    );
    const menu2 = (
      <Checkbox.Group onChange={this.handleCheckedValue} value={checkedValue}>
        <Menu>
          {
            columns.map(item => {
              return (
                <Menu.Item key={item.className}>
                  <Checkbox value={item.dataIndex}>{item.title}</Checkbox>
                </Menu.Item>
              )
            })
          }
        </Menu>
      </Checkbox.Group>
    )

    let newColumns = columns.filter(item => checkedValue.indexOf(item.dataIndex) != -1)

    const renderTableTop = () => {
      return settingInfo.type == 0 || settingInfo.type == 2 ? (
        <div className={styles.tableTop}>
          <div>
            <Input.Search 
              placeholder="请输入登录用户名" 
              value={search} 
              onChange={(e) => this.setState({search:e.target.value})} 
              onSearch={() => this.doSearch(1,size)} 
              style={{width:200,marginRight:8}}
            />
            <Dropdown 
              overlay={menu2} 
              placement="bottomCenter" 
              trigger={['click']} 
              overlayStyle={{maxHeight:500,overflow:"auto",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.15)"}}
              onVisibleChange={this.handleVisibleChange}
              visible={dropDownVisible}
            >
              <Button icon="setting"></Button>
            </Dropdown>
          </div>
          
          <div style={{flexShrink:'0'}}>
            <Button type="primary" style={{marginRight:8}} onClick={this.doSync} >同步</Button>
            <Button type="primary" ghost style={{marginRight:8}} onClick={this.getSyncList}>同步记录</Button>
            <MoreOption menuList={[{key:'1',name:"对接管理"},{key:"2",name:"字段管理"}]} btnInfo={{name:"更多",style:{marginRight:8}}} moreMenuClick={this.handleMenuClick} />
          </div>
        </div>
      ) : settingInfo.type == 3 ? (
          <div className={styles.tableTop}>
            <div>
              <ButtonGroup 
                title="添加成员"
                group="add"
                handleClick={() => this.openAddMember()}
              />
              {
              //   <ButtonGroup 
              //   title="批量导入"
              //   group="import"
              //   handleClick={() => this.setState({importVisible:true})}
              // />
              // <ButtonGroup 
              //   title="批量导出"
              //   group="download"
              // />
              }
              <MoreOption menuList={[{key:'1',name:"对接管理"},{key:"2",name:"字段管理"}]} btnInfo={{name:"更多",style:{marginRight:8}}} moreMenuClick={this.handleMenuClick} />
            </div>
            <div>
              {
                /**
                 * <div className={styles.selectSuffixBox}>
                <span className={styles.selectSuffix}>账号状态</span>
                <Select style={{width:90}}>
                  <Select.Option value={-1}>全部</Select.Option>
                  <Select.Option value={0}>在职</Select.Option>
                  <Select.Option value={1}>离职</Select.Option>
                </Select>
              </div>
                */
              }
              <Dropdown 
                overlay={menu2} 
                placement="bottomCenter" 
                trigger={['click']} 
                overlayStyle={{maxHeight:500,overflow:"auto",boxShadow:"0 2px 8px rgba(0, 0, 0, 0.15)"}}
                onVisibleChange={this.handleVisibleChange}
                visible={dropDownVisible}
              >
                <Button icon="setting" style={{marginRight:30}}></Button>
              </Dropdown>
              
              
            </div>
          </div>
      ) : ''
    }
    return(
      <div>
        { renderTableTop() }

        <Table 
          columns={newColumns}
          dataSource={list}
          pagination={false}
          loading={loading}
          rowKey={'id'}
          scroll={{ x: "auto", y: 'calc(100vh - 320px)' }}
        />

        {parseInt(total) > 10 ? (
          <Pagination
            showQuickJumper
            total={total}
            current={current}
            onChange={this.doSearch}
            style={{ textAlign: 'right', marginTop: 16 }}
          />
        ) : null}

        <ImportModal 
          attributeList={{
            title:"导入",
            visible:importVisible,
          }}
          handleCancel={this.handleCancelImport}
          handleDownload={this.handleDownload}
          importUrl="/cloud/form/dictionary/import"
          handleUpload={this.handleUpload}
          importLoading={importLoading}
        />

        <RecordsModal onRef={ref => this.RecordsModal = ref} />
      </div>
    )
  }
}

export default CustomDockData